<script lang="ts" setup name="QuickDialog">
import { Dialog, Emits } from '~/src/api/interface'

const params = reactive<Dialog<{ list: number[] }>>({
  visible: false,
  data: {
    list: [],
  },
  title: '',
  list: [],
})
const emits = defineEmits<Emits<number[]>>()
const onConfirm = () => {
  console.log(params.data.list)

  if (params.data.list.length < 1) return ElMessage.error('最少选择一项')
  emits('onConfirm', params.data.list)
  params.visible = false
}

const { visible } = toRefs(params)

const putParams = async (data: Dialog<{ list: number[] }>) => {
  params.visible = true
  params.data = data.data
  params.list = data.list
}

defineExpose({
  putParams,
})
</script>

<template>
  <vab-dialog v-model:modelValue="visible" title="请选择需开启极速输入的列" :width="400">
    <el-checkbox-group v-model="params.data.list" class="ml20">
      <el-checkbox v-for="item in params.list" :key="item.value" :label="item.label" :value="item.value" />
    </el-checkbox-group>
    <template #footer>
      <el-button type="primary" @click="onConfirm">保存</el-button>
      <el-button @click="visible = false">取消</el-button>
    </template>
  </vab-dialog>
</template>

<style lang="scss" scoped></style>
